import { AREA_TYPE_ID } from '@/utils/constant'
// 区域公共样式
export const commonStyle = {
  rotate: 0,
  opacity: 1,
  top: 0,
  left: 0,
  width: 200,
  height: 200,
  zIndex: 1,
}

export const commonAttr = {
  siderType: 0,
  picScaleType: 0,
  videoVolumeSW: 1,
  playTimes: 6,
  pauseTime: 5,
  rotation: 0,
  srcGroup: [],
}

// 边框属性
export const borderAttr = {
  borderSW: 0,
  borderType: 1,
  borderEffect: 1,
  borderSpeed: 1,
}

// 图片效果属性
export const picAttr = {
  picStyleIn: 0,
  picStyleOut: 0,
  picShowTime: 5,
  picStyleInTime: 0,
  picStyleOutTime: 0,
}

// 图片属性
export const picItemAttr = {
  name: '',
  src: '',
  size: 0,
  playTimes: 0,
  dateSW: 0,
  startDate: 0,
  endDate: 0,
  pauseTime: 5,
  ...picAttr,
}

// 字幕属性
export const subtitlesAttrs = {
  text: 'text',
  fontSize: '12',
  fontWeight: '',
  textDecoration: '',
  fontStyle: '',
  textAlign: 'left',
  fontFamily: 'arial.ttf',
  fontColor: '#ff0000',
  lineHeight: '20',
  background: '',
  listType: '',
  textShow: '0',
  scrollSpeed: 1,
  borderColoreffect: 0,
  siderType: 0,
  pauseTime: 5,
  textGroup: [
    {
      id: 0,
      name: 'subtitle',
      text: 'please enter text',
    },
  ],
}

// 时钟-数字时钟
export const digitalClockAttr = {
  jetLag: 1,
  calculation: 1,
  layout: 0,
  lineHeight: 25,
  dateFontSize: 16,
  timeFontSize: 12,
  dateWeight: '0',
  weekWeight: '0',
  timeWeight: '0',
  fontFamily: 'Arial',
  fontColor: '#ff0000',
  clockW: '80',
  yearShow: 0,
  monthShow: 0,
  dateShow: 0,
  hourShow: 0,
  minutesShow: 0,
  secondsShow: 0,
  weekShow: 0,
  timeShow: 0,
  clockType: '1',
  text: '',
  textColor: '#00bfff',
  textSize: 20,
  textBold: 1,
  hourColor: '#00ff00',
  minuteColor: '#0000ff',
  secondColor: '#ff0000',
  minuteMarkType: 0,
  minuteMarkSize: 12,
  minuteMarkColor: '#ff0000',
  hourMarkType: 0,
  hourMarkSize: 16,
  hourMarkColor: '#00ff55',
  backColor: '#000000',
  lunarShow: 0,
  dayShow: 0,
  clockFormat: 0,
  boldSet: 1,
  fontCustomColor: '#ff0000',
  timeZoneValue: '480',
  dateFormat: 0,
  weekFormat: 0,
  timeFormat: 0,
  dateColor: '#ff0000',
  weekColor: '#ff0000',
  timeColor: '#ff0000',
  lunarColor: '#ff0000',
  weekTimeSwap: 0,
  dialType: 0,
  textAlign: '0',
}

// 区域映射组件名称
export const areaTypeComponent = {
  [AREA_TYPE_ID.VIDEO]: 'VideoComponent',
  [AREA_TYPE_ID.PICTURE]: 'Picture',
  [AREA_TYPE_ID.SUBTITLES]: 'Subtitles',
  [AREA_TYPE_ID.CLOCK]: 'Clock',
}

export const areaTypeName = {
  [AREA_TYPE_ID.VIDEO]: '视频',
  [AREA_TYPE_ID.PICTURE]: '图片',
  [AREA_TYPE_ID.SUBTITLES]: '字幕',
  [AREA_TYPE_ID.CLOCK]: '时钟',
}

// 编辑器左侧组件列表
export const componentList = [
  // 图片
  {
    type: AREA_TYPE_ID.PICTURE,
    ...commonStyle,
    ...borderAttr,
    ...picAttr,
    siderType: 0,
    picScaleType: 0,
    playTimes: 6,
    pauseTime: 5,
    rotation: 0,
    srcGroup: [],
  },
  // 视频
  {
    type: AREA_TYPE_ID.VIDEO,
    ...commonStyle,
    ...borderAttr,
    videoVolumeSW: 1,
    srcGroup: [],
  },
  // 字幕
  {
    type: AREA_TYPE_ID.SUBTITLES,
    ...commonStyle,
    ...borderAttr,
    ...subtitlesAttrs,
  },
  // 数字时钟
  {
    type: AREA_TYPE_ID.CLOCK,
    ...commonStyle,
    ...borderAttr,
    ...digitalClockAttr,
  },
]
